<template>
  <ContentDetailWrap>
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="submit">
        {{ t('order.receiving') }}
      </BaseButton>
    </template>
    <div class="w-full flex justify-between">
      <div class="w-85%">
        <!--    展示字段-->
        <Descriptions :schema="descriptionSchema" :data="form" />
        <!--    商品信息-->
        <div class="flex my-20px text-14px font-bold">商品信息</div>
        <el-table
          :data="shopTableList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('wholesalOrder.warehouse')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(warehouseList, row.wid) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.code')"
            prop="code"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.name')"
            prop="name"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.type')"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(warehouseTypeList, row.is_futures) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.arrivalDate')"
            prop="arrival_date"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('order.originalPrice')"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.original_price }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.discountedPrice')"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.actual_price }}({{ row.actual_quoted_currency_name }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.theActualPricePaid')"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ row.actual_selling_price }}({{
                useEnumeratePicker(currentList, form?.currency ?? '')
              }})
            </template>
          </el-table-column>
          <el-table-column
            :label="t('order.quantity')"
            prop="quantity"
            min-width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.brand')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(brandList, row.brand) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.computingPower')"
            prop="hashrate"
            min-width="150"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.warranty')"
            prop="expiration_date"
            min-width="120"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <!--    支付信息-->
        <div class="flex my-20px text-14px font-bold">支付信息</div>
        <el-table
          :data="payTableList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('order.paymentMethod')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(paymentMethodList, row.pay_method) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.receivingAccountNumber')"
            prop="pay_account"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.transactionTicketNumber')"
            prop="voucher_code"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.proofOfTransfer')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <el-image
                v-if="row.transfer_voucher_url"
                style="width: 100px; height: 100px"
                :src="row.transfer_voucher_url"
                :preview-teleported="true"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[row.transfer_voucher_url]"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.paymentTrackingCode')"
            prop="pay_code"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentCurrency')"
            prop="pay_currency"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentLinks')"
            prop="payment_url"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentTime')"
            prop="pay_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.theAmountToBePaid')"
            prop="pay_amount"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.paymentStatus')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(itemPayStatusList, row.pay_status) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.notes')"
            prop="notes"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.reviewers')"
            prop="reviewer"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(operatorList, row.reviewer) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.reviewTime')"
            prop="reviewer_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <!--    自提信息-->
        <div v-if="form.delivery_method === 0">
          <div class="flex my-20px text-14px font-bold">自提信息</div>
          <el-table
            :data="selfPickupTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.pickupCode')"
              prop="pickup_code"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpAddress')"
              prop="pickup_address"
              min-width="400"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.theNameOfThePersonWhoPickedUpTheGoods')"
              prop="pickup_name"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpPersonSPhoneNumber')"
              prop="pickup_phone"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.passportOfThePersonPickingUpTheGoods')"
              prop="pickup_passport"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.pickUpPersonSVehicleInformation')"
              prop="pickup_vehicle"
              min-width="200"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-if="form.delivery_method === 1">
          <!--    收货信息-->
          <div class="flex my-20px text-14px font-bold">收货信息</div>
          <el-table
            :data="receivingTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.consignee')"
              prop="name"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.phone')"
              prop="phone"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.email')"
              prop="email"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.zipCode')"
              prop="zip_code"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.address')"
              prop="address"
              min-width="350"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.alternateAddress')"
              prop="address2"
              min-width="350"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.company')"
              prop="company"
              min-width="200"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.aging')"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(agingList, row.prescription) }}
              </template>
            </el-table-column>
          </el-table>
          <!--    物流信息-->
          <div class="flex my-20px text-14px font-bold">物流信息</div>
          <el-table
            :data="logisticsTableList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              :label="t('order.logisticsCompanies')"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(logisticsCompanyList, row.company) }}
              </template>
            </el-table-column>
            <el-table-column
              :label="t('order.trackingNumber')"
              prop="logistics_no"
              min-width="250"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('order.logisticsVouchers')"
              min-width="250"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <div v-if="row.logistics_voucher && row.logistics_voucher.length">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="row.logistics_voucher[0]"
                    :preview-teleported="true"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="row.logistics_voucher"
                    fit="cover"
                  />
                  <div>{{ `共${row.logistics_voucher.length}张` }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="t('order.cost')"
              prop="cost"
              min-width="200"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
      </div>
      <!--      时间线-->
      <TimeLine class="w-15%" :data="timeLineList" />
      <!--      收货弹框-->
      <DialogReceiving ref="DialogReceivingRef" />
    </div>
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
import TimeLine from './components/TimeLine/index.vue'
import DialogReceiving from './components/DialogReceiving/index.vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { useEnumeratePicker } from '@/utils'
import { getOrderEnumApi, getDetailApi } from '@/api/order'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const loading = ref<boolean>(false)
const routerParams = ref<Record<string, any>>({})
const DialogReceivingRef = ref<InstanceType<typeof DialogReceiving>>()

const form = ref<Record<string, any>>({})

const shopTableList = ref<Array<Record<string, any>>>([])
const payTableList = ref<Array<Record<string, any>>>([])
const selfPickupTableList = ref<Array<Record<string, any>>>([])
const receivingTableList = ref<Array<Record<string, any>>>([])
const logisticsTableList = ref<Array<Record<string, any>>>([])
const timeLineList = ref<Array<Record<string, any>>>([])

const receiptMethodList = ref<Array<Record<string, any>>>([])
const orderStatusList = ref<Array<Record<string, any>>>([])
const paymentStatusList = ref<Array<Record<string, any>>>([])
const itemPayStatusList = ref<Array<Record<string, any>>>([])
const operatorList = ref<Array<Record<string, any>>>([])

const brandList = ref<Array<Record<string, any>>>([])
const currentList = ref<Array<Record<string, any>>>([])

const warehouseList = ref<Array<Record<string, any>>>([])
const warehouseTypeList = ref<Array<Record<string, any>>>([])

const paymentMethodList = ref<Array<Record<string, any>>>([])
const agingList = ref<Array<Record<string, any>>>([])
const logisticsCompanyList = ref<Array<Record<string, any>>>([])

const descriptionSchema = ref<DescriptionsSchema[]>([
  {
    field: 'user',
    label: t('order.customer')
  },
  {
    field: 'order_no',
    label: t('order.orderCode')
  },
  {
    field: 'total_amount',
    label: t('order.theTotalAmountOfTheOrder')
  },
  {
    field: 'order_status',
    label: t('order.orderStatus'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(orderStatusList.value, data.order_status)}</span>
      }
    }
  },
  {
    field: 'pay_amount',
    label: t('order.theAmountToBePaid')
  },
  {
    field: 'pay_status',
    label: t('order.payStatus'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(paymentStatusList.value, data.pay_status)}</span>
      }
    }
  },
  {
    field: 'delivery_method',
    label: t('order.receiptMethod'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(receiptMethodList.value, data.delivery_method)}</span>
      }
    }
  }
])

//点击收货打开收货弹框
const submit = () => {
  nextTick(() => {
    DialogReceivingRef.value!.dialogVisible = true
  })
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getOrderEnumApi({ field: 'all' })
  receiptMethodList.value = resp.data.delivery_method
  orderStatusList.value = resp.data.status
  paymentStatusList.value = resp.data.pay_status
  paymentMethodList.value = resp.data.pay_method
  brandList.value = resp.data.brand
  currentList.value = resp.data.currency
  warehouseList.value = resp.data.warehouse
  warehouseTypeList.value = resp.data.is_futures
  agingList.value = resp.data.prescription
  logisticsCompanyList.value = resp.data.logistics_company
  itemPayStatusList.value = resp.data.item_pay_status
  operatorList.value = resp.data.operator
}

const initialize = async () => {
  routerParams.value = JSON.parse(decodeURIComponent(query.data as unknown as string)) || {}
  const resp = await getDetailApi(routerParams.value.id || '')
  form.value = resp.data
  shopTableList.value = resp.data.list
  payTableList.value = resp.data.payment
  selfPickupTableList.value = resp.data.pickup
  receivingTableList.value = resp.data.delivery
  logisticsTableList.value = resp.data.logistics
  timeLineList.value = resp.data.logger
}
onMounted(() => {
  getDropDownBoxInfo()
  initialize()
})
</script>
<style lang="less" scoped></style>
